<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>财务统计 - 极简Todo系统</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <style>
      body {
        height: 100vh;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
          sans-serif;
        background-color: #f2f2f7;
      }

      .ios-status-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 44px;
        padding: 0 16px;
        font-size: 12px;
        font-weight: 600;
        color: #000;
        background-color: #ffffff;
      }

      .nav-header {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        background-color: white;
        border-bottom: 1px solid #f0f0f0;
      }

      .stats-card {
        padding: 16px;
        margin-bottom: 16px;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      }

      .time-selector {
        display: flex;
        padding: 4px;
        margin-bottom: 16px;
        background-color: #f2f2f7;
        border-radius: 8px;
      }

      .time-option {
        flex: 1;
        padding: 8px;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        border-radius: 6px;
      }

      .time-option.active {
        background-color: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .chart-container {
        position: relative;
        height: 200px;
        margin-top: 20px;
        margin-bottom: 40px;
      }

      .chart-bar {
        position: absolute;
        bottom: 0;
        width: 16px;
        border-radius: 4px 4px 0 0;
      }

      .chart-label {
        position: absolute;
        bottom: -24px;
        width: 16px;
        font-size: 12px;
        color: #8e8e93;
        text-align: center;
      }

      .category-stats {
        display: flex;
        align-items: center;
        margin-bottom: 4px;
      }

      .category-color {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        border-radius: 50%;
      }

      .category-name {
        flex: 1;
        font-size: 14px;
      }

      .category-value {
        font-size: 14px;
        font-weight: 600;
      }

      .category-bar {
        height: 8px;
        margin-bottom: 12px;
        overflow: hidden;
        background-color: #f2f2f7;
        border-radius: 4px;
      }

      .category-progress {
        height: 100%;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <!-- iOS 状态栏 -->
    <div class="ios-status-bar">
      <div>9:41</div>
      <div class="flex space-x-2">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>

    <div class="nav-header">
      <a href="finance.html" class="text-blue-500">
        <i class="fas fa-chevron-left mr-2"></i>
        返回
      </a>
      <h1 class="text-xl font-semibold mx-auto">财务统计</h1>
    </div>

    <div class="p-4">
      <div class="time-selector">
        <div class="time-option">周</div>
        <div class="time-option active">月</div>
        <div class="time-option">年</div>
        <div class="time-option">全部</div>
      </div>

      <div class="stats-card">
        <div class="flex justify-between items-center">
          <div>
            <div class="text-sm text-gray-500">本月收入</div>
            <div class="text-xl font-bold text-green-500">¥5,800.00</div>
          </div>
          <div>
            <div class="text-sm text-gray-500">本月支出</div>
            <div class="text-xl font-bold text-red-500">¥2,550.00</div>
          </div>
          <div>
            <div class="text-sm text-gray-500">结余</div>
            <div class="text-xl font-bold">¥3,250.00</div>
          </div>
        </div>

        <div class="chart-container">
          <div class="chart-bar" style="left: 10px; height: 30%; background-color: #ff3b30"></div>
          <div
            class="chart-bar"
            style="bottom: 30%; left: 10px; height: 60%; background-color: #34c759"
          ></div>
          <div class="chart-label" style="left: 10px">1</div>

          <div class="chart-bar" style="left: 40px; height: 20%; background-color: #ff3b30"></div>
          <div
            class="chart-bar"
            style="bottom: 20%; left: 40px; height: 40%; background-color: #34c759"
          ></div>
          <div class="chart-label" style="left: 40px">2</div>

          <div class="chart-bar" style="left: 70px; height: 15%; background-color: #ff3b30"></div>
          <div
            class="chart-bar"
            style="bottom: 15%; left: 70px; height: 0%; background-color: #34c759"
          ></div>
          <div class="chart-label" style="left: 70px">3</div>

          <div class="chart-bar" style="left: 100px; height: 25%; background-color: #ff3b30"></div>
          <div
            class="chart-bar"
            style="bottom: 25%; left: 100px; height: 10%; background-color: #34c759"
          ></div>
          <div class="chart-label" style="left: 100px">4</div>

          <div class="chart-bar" style="left: 130px; height: 40%; background-color: #ff3b30"></div>
          <div
            class="chart-bar"
            style="bottom: 40%; left: 130px; height: 20%; background-color: #34c759"
          ></div>
          <div class="chart-label" style="left: 130px">5</div>

          <div class="chart-bar" style="left: 160px; height: 10%; background-color: #ff3b30"></div>
          <div
            class="chart-bar"
            style="bottom: 10%; left: 160px; height: 80%; background-color: #34c759"
          ></div>
          <div class="chart-label" style="left: 160px">6</div>

          <div class="chart-bar" style="left: 190px; height: 35%; background-color: #ff3b30"></div>
          <div
            class="chart-bar"
            style="bottom: 35%; left: 190px; height: 15%; background-color: #34c759"
          ></div>
          <div class="chart-label" style="left: 190px">7</div>

          <div class="chart-bar" style="left: 220px; height: 20%; background-color: #ff3b30"></div>
          <div
            class="chart-bar"
            style="bottom: 20%; left: 220px; height: 30%; background-color: #34c759"
          ></div>
          <div class="chart-label" style="left: 220px">8</div>

          <div class="chart-bar" style="left: 250px; height: 15%; background-color: #ff3b30"></div>
          <div
            class="chart-bar"
            style="bottom: 15%; left: 250px; height: 25%; background-color: #34c759"
          ></div>
          <div class="chart-label" style="left: 250px">9</div>

          <div class="chart-bar" style="left: 280px; height: 30%; background-color: #ff3b30"></div>
          <div
            class="chart-bar"
            style="bottom: 30%; left: 280px; height: 50%; background-color: #34c759"
          ></div>
          <div class="chart-label" style="left: 280px">10</div>
        </div>

        <div class="flex justify-center space-x-6">
          <div class="flex items-center">
            <div class="w-3 h-3 rounded-full bg-green-500 mr-1"></div>
            <span class="text-xs text-gray-500">收入</span>
          </div>
          <div class="flex items-center">
            <div class="w-3 h-3 rounded-full bg-red-500 mr-1"></div>
            <span class="text-xs text-gray-500">支出</span>
          </div>
        </div>
      </div>

      <div class="stats-card">
        <h3 class="font-semibold mb-4">支出分类</h3>

        <div class="category-stats">
          <div class="category-color" style="background-color: #ff3b30"></div>
          <div class="category-name">餐饮</div>
          <div class="category-value">¥850.00 (33%)</div>
        </div>
        <div class="category-bar">
          <div class="category-progress" style="width: 33%; background-color: #ff3b30"></div>
        </div>

        <div class="category-stats">
          <div class="category-color" style="background-color: #ff9500"></div>
          <div class="category-name">购物</div>
          <div class="category-value">¥650.00 (25%)</div>
        </div>
        <div class="category-bar">
          <div class="category-progress" style="width: 25%; background-color: #ff9500"></div>
        </div>

        <div class="category-stats">
          <div class="category-color" style="background-color: #34c759"></div>
          <div class="category-name">交通</div>
          <div class="category-value">¥450.00 (18%)</div>
        </div>
        <div class="category-bar">
          <div class="category-progress" style="width: 18%; background-color: #34c759"></div>
        </div>

        <div class="category-stats">
          <div class="category-color" style="background-color: #5856d6"></div>
          <div class="category-name">住房</div>
          <div class="category-value">¥350.00 (14%)</div>
        </div>
        <div class="category-bar">
          <div class="category-progress" style="width: 14%; background-color: #5856d6"></div>
        </div>

        <div class="category-stats">
          <div class="category-color" style="background-color: #af52de"></div>
          <div class="category-name">娱乐</div>
          <div class="category-value">¥250.00 (10%)</div>
        </div>
        <div class="category-bar">
          <div class="category-progress" style="width: 10%; background-color: #af52de"></div>
        </div>
      </div>

      <div class="stats-card">
        <h3 class="font-semibold mb-4">收入分类</h3>

        <div class="category-stats">
          <div class="category-color" style="background-color: #34c759"></div>
          <div class="category-name">工资</div>
          <div class="category-value">¥5,000.00 (86%)</div>
        </div>
        <div class="category-bar">
          <div class="category-progress" style="width: 86%; background-color: #34c759"></div>
        </div>

        <div class="category-stats">
          <div class="category-color" style="background-color: #007aff"></div>
          <div class="category-name">红包</div>
          <div class="category-value">¥800.00 (14%)</div>
        </div>
        <div class="category-bar">
          <div class="category-progress" style="width: 14%; background-color: #007aff"></div>
        </div>
      </div>
    </div>
  </body>
</html>
